<template>
  <div>
    <el-card shadow="never" class="border-0 titles">
      数据明细
    </el-card>
<!--    <p style="background-color: #00afff; height: 10px; margin: 10px 0;"></p> &lt;!&ndash; 添加 margin 和 height &ndash;&gt;-->
    <el-row :gutter="20" style="margin-left: 2%;">
      <el-col :span="6" v-for="obj in list_content[0]" :key="obj.title">
        <div :style="`
          width: 70%;
          height: 113px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: ${obj.image};
          border-radius: 9px;
          flex-direction: column;
        `">
          <div>{{ obj.title }}</div>
          <div>{{ obj.number }}</div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-card shadow="never" class="border-0 titles">
        周审核提交统计
      </el-card>
      <div ref="lineChart" style="width: 100%; height: 400px;"></div>
      <!-- {{ zxObj }} -->
    </div>
  </div>
</template>

<script setup name="Index">
import { getBankuaiData, getZhexiantuData } from "@/api/audit/adminaudit";
import { ref, onMounted } from "vue";
import * as echarts from 'echarts';
const detailList = ref([]);
const list_content = ref([
  [
    { title: "总数据", number: 1, image: "#e7f194" },
    { title: "待审核", number: 2, image: "#00afff" },
    { title: "审核通过", number: 3, image: "#b3e69b" },
    { title: "审核不通过", number: 4, image: "#ecbbbb" },
  ]
]);
const zxObj = ref([]); // 初始化为数组
onMounted(async () => {
  // 调用api接口
  getBankuaiData().then((res) => {
    list_content.value[0][0].number = res.data.total; // 总行数
    list_content.value[0][1].number = res.data.auditTotal; // 待审核
    list_content.value[0][2].number = res.data.auditShenHeTongGuo; // 审核通过
    list_content.value[0][3].number = res.data.auditShenHeBuTongGuo; // 审核不通过
  });
  // 获取折线图数据
  getZhexiantuData().then((res) => {
    zxObj.value = res; // 假设 res 是一个数组
    initChart();
  });
});
// Reference to the chart DOM element
const lineChart = ref(null);
// Function to initialize the chart
const initChart = () => {
  const myChart = echarts.init(lineChart.value);
  // Prepare data for the chart
  const dates = zxObj.value.map(item => item.date); // 使用 .value 访问 zxObj
  const counts = zxObj.value.map(item => item.count); // 使用 .value 访问 zxObj
  // Chart options
  const option = {
    title: {
      // text: '周审核提交统计',
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: dates,
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      name: '数量',
      type: 'line',
      data: counts,
    }],
  };
  // Set the options for the chart
  myChart.setOption(option);
};
</script>
<style scoped lang="scss">
.titles {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 3% 0; /* 上下的 margin */
  border: none;
  padding-left: 18px;
}
.el-login-footer {
  margin: 10px 0; /* 为底部元素添加 margin */
}
</style>